<template>
	<view>
		<view class="query">
			<view class="query-input">
				<image :src="baseUrl+'assets/static/serach.png'"></image>
				<picker mode="date" :value="queryParams.createtime" @change="extraChange" fields="month">
					<input type="text" placeholder="请选择时间" v-model="queryParams.createtime" disabled
						placeholder-style="font-size: 28rpx;color: #969699;" />
				</picker>
				<image :src="baseUrl+'assets/static/del.png'" mode="" v-if="queryParams.createtime" @click="extraDel"
					class="del" />
			</view>
		</view>
		<view class="detailNav">
			<view :class="['detailNav-item',navId==item.id?'active':'']" @tap="choiceNav(item.id,item.url)"
				v-for="(item,index) in detailNav" :key='index'>
				{{item.title}}
			</view>
		</view>

		<!-- 底部内容 -->
		<view class="all-box">
			<view class="survey" v-if="surveyList.length>0">
				<view class="survey-box" v-for="(item,index) in surveyList" :key='index'>
					<view class="create-time">
						<image :src="baseUrl+'assets/static/detail/engineer-icon.png'" mode=""></image>
						<text
							v-if="item.is_admin&&item.is_admin == 1">[管理员]{{item.admin.nickname}}在{{item.createtime}}创建</text>
						<text v-else>[工程师]{{item.user.nickname}}在{{item.createtime}}创建</text>
					</view>
					<view class="survey-content">
						<block>
							<view class="cost">
								<image v-if="item.status==1" :src="baseUrl+'assets/static/shenhe.png'" class="shenhe"
									mode="">
								</image>
								<view class="cost-item">
									类目：<text class="cost-item-border">{{item.cost_category_id}}</text>
								</view>
								<view class="cost-item">
									有无发票：<text class="cost-item-border">{{item.billing_data==0?'有':'无'}}</text>
								</view>
								<view class="cost-item">
									报销金额：<text class="cost-item-border">{{item.money}}元</text>
								</view>
							</view>
							<view class="explain">
								<view class="explain-title">
									成本说明
								</view>
								<view class="explain-content">
									{{item.explain}}
								</view>
								<image class="explain-img" :src="item1" mode=""
									v-for="(item1,index1) in item.multiMedia.imgs" :key='index1'
									@tap="preview(index1,item.multiMedia.imgs)">
								</image>
							</view>
						</block>
					</view>
				</view>
			</view>

			<view v-else class="all-empty">
				<image :src="baseUrl+'assets/static/empty.png'" mode=""
					style="width: 150rpx;height: 200rpx;margin-bottom: 20rpx;">
				</image>
				<text>什么也没有哦...</text>
			</view>
		</view>
		<button-btm v-if="navId ==1">
			发起报销
		</button-btm>

		<!-- 备案码 -->
		<!-- <modal class="k" v-if="areaShow" title="备案码" confirm-text="保存" cancel-text="取消" @cancel="cancelAdd"
			@confirm="confirmAdd">
			<input type="text" v-model="query_code" placeholder="请输入备案码" class="intxt" maxlength="5" />
		</modal> -->
	</view>
</template>
<script>
	import detailTop from '@/components/detailTop/detailTop.vue'
	import buttonBtm from '@/components/button-btm.vue'
	import baseUrl from '@/request/baseUrl.js'
	export default {
		components: {
			detailTop,
			buttonBtm
		},

		data() {
			return {
				baseUrl: baseUrl,
				queryParams: {
					createtime: '',
					page: 1,
				},
				navId: 2,
				detailNav: [{
					id: 2,
					title: '工单报销',
					url: '/handcover/cost_list'
				}, {
					id: 1,
					title: '手动报销',
					url: '/handcover/hand_cover_list'
				}],
				urlPath: '',
				surveyList: [], //底部列表
				last_page: 1,
				costTypeList: [], //成本类目
			}
		},

		watch: {

		},

		onLoad() {
			this.urlPath = this.detailNav[0].url
		},
		onShow() {
			this.init()
			this.getCostType()
			this.getList(this.urlPath)
		},
		methods: {
			// 预览图片
			preview(current, urls) {
				console.log(current, '----', urls)
				uni.previewImage({
					current,
					urls,
				});
			},
			/* 获取成本类目 */
			getCostType() {
				this.$https.post('/warranty/costType').then(res => {
					this.costTypeList = res.data
				})
			},
			// 切换日期
			extraChange(e) {
				this.queryParams.createtime = e.detail.value;
				if (!this.queryParams.createtime) return
				this.init()
				this.getList(this.urlPath);
			},
			init() {
				this.queryParams.page = 1;
				this.surveyList = []
			},
			// 重置
			extraDel() {
				this.queryParams.createtime = ''
				this.init()
				this.getList();
			},

			/*  点击tabbar  */
			choiceNav(id, url) {
				this.init()
				this.urlPath = url
				this.navId = id;
				this.getList();

			},
			getList() {
				console.log(this.queryParams, '底部列表数据请求')
				this.$https.post(this.urlPath, this.queryParams).then(res => {
					console.log(res.data.data, '---i-----')
					if (res.data.last_page > 0) {
						this.last_page = res.data.last_page
						if (res.data.data.length) {
							this.surveyList = this.surveyList.concat(res.data.data)

							if (this.surveyList.length > 0) {
								this.surveyList.forEach((item, index) => {
									let height_more = true
									item.height_more = height_more
									if (item.cost_category_id) {
										let obj = this.costTypeList.find(item2 => {
											return item2.id == item.cost_category_id
										})
										item.cost_category_id = obj.name
									}
									if (item.images) { //存在照片或视频
										let images = item.images //字符串转数组  获取照片和视频
										item.multiMedia = {
											imgs: [],
											video: ''
										}
										images.forEach(item3 => {
											if (item3 != '') {
												if (this.judgmentFile(item3)) {
													item.multiMedia.video = item3
												} else {
													item.multiMedia.imgs.push(item3)
												}
											}
										})
									}
								})
							}
						}
					}
				})
			},
			/* 判断是否为视频文件 */
			judgmentFile(picUrl) {
				let filename = picUrl; //文件路径地址
				let index1 = filename.lastIndexOf(".");
				let index2 = filename.length;
				let postf = filename.substring(index1, index2); //获取文bai件后缀名duzhi
				//判断文件后缀名是否等于视频文件的后缀名
				if (postf === ".avi" || postf === ".mp4" || postf === ".rmvb") {
					return true
				} else {
					return false
				}
			},
			/* 底部按钮 跳转 */
			btnJump() {
				wx.navigateTo({
					url: '../addRecord/addRecord?nav_id=2&service_id='
				})
			},

		},
		onReachBottom() {
			if (this.queryParams.page != this.last_page) {
				this.queryParams.page++
				this.getList()
			}
		},
	}
</script>
<style lang="scss" scoped>
	.k {
		position: absolute;
		z-index: 19999;
	}

	.cost {
		display: flex;
		margin-bottom: 25rpx;
		position: relative;

		.shenhe {
			position: absolute;
			width: 144rpx;
			height: 144rpx;
			right: 70rpx;
			top: -65rpx;
		}

		.cost-item {
			font-size: 24rpx;
			font-weight: 400;
			color: #969699;
			padding-right: 30rpx;

			.cost-item-border {
				color: #000000 !important;
			}
		}
	}

	.explain {
		&-title {
			font-size: 24rpx;
			font-weight: 500;
			color: #303030;
			margin-bottom: 22rpx;
		}

		&-content {
			background: #F6F6FB;
			border-radius: 8rpx;
			padding: 24rpx;
			font-size: 24rpx;
			font-weight: 500;
			color: #B6BDBD;
		}

		&-img {
			width: 120rpx;
			height: 120rpx;
			border-radius: 4rpx;
			margin-right: 36rpx;
			margin-top: 24rpx;
		}
	}


	.all-box {
		padding: 0 34rpx 200rpx;

		.title-n {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 32rpx;
			background: linear-gradient(91deg, #e2ecfb 0%, rgba(255, 255, 255, 0) 100%);
			font-size: 28rpx;
			font-weight: 600;
			color: #6AA6FA;
			line-height: 33rpx;
		}

		.all-empty {
			margin: auto;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 100rpx;
			font-size: 24rpx;
			color: #B6BDBD;
		}

	}

	.survey-box {
		border-radius: 8rpx;
		border: 2rpx solid rgba(0, 0, 0, 0.04);
		margin-top: 20rpx;
	}

	.create-time {
		font-size: 24rpx;
		font-weight: 500;
		color: #3B3D3D;
		background: #F5F6F8;
		border-bottom: 2rpx solid rgba(0, 0, 0, 0.04);
		padding: 16rpx;
		display: flex;
		align-items: center;

		image {
			width: 32rpx;
			height: 32rpx;
			margin-right: 10rpx;
		}
	}

	.survey-content {
		padding: 18rpx;
	}

	.active {
		font-size: 36rpx !important;
		font-weight: 600 !important;
		color: #141414 !important;
		position: relative;
	}

	.active::after {
		content: '';
		width: 8rpx;
		height: 8rpx;
		position: absolute;
		bottom: -14rpx;
		left: 50%;
		margin-left: -35rpx;
		border-radius: 50%;
		background-color: $public-oclor;
	}

	.active::before {
		content: '';
		width: 54rpx;
		height: 8rpx;
		position: absolute;
		bottom: -14rpx;
		left: 50%;
		margin-left: -27rpx;
		border-radius: 8rpx;
		background-color: $public-oclor;
	}

	.query {
		display: flex;
		align-items: center;
		height: 70rpx;
		justify-content: space-between;
		color: #000;
		position: sticky;
		top: 0;
		z-index: 9;
		width: 92%;
		background-color: #f7f8fb;
		padding: 36rpx 30rpx;
		font-size: 26rpx;

		picker {
			width: 86%;
		}

		&-input {
			display: flex;
			align-items: center;
			height: 36rpx;
			background: #FFFFFF;
			border-radius: 44rpx;
			display: flex;
			padding: 26rpx 32rpx 26rpx 24rpx;
			display: flex;
			align-items: center;
			width: 100%;

			image {
				width: 36rpx;
				height: 36rpx;
				margin-right: 34rpx;
			}

			.del {
				margin-right: 0;
			}
		}
	}

	.detailNav {
		margin: 36rpx 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
		box-sizing: border-box;

		&-item {
			text-align: center;
			font-size: 32rpx;
			font-weight: 500;
			color: #969699;
		}
	}
</style>